<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yy</title>
    <script src="./jsvue.js"></script>

</head>

<body>
    <div id="app">
        <button @click="btnone">1 </button>
        <button @click="btntwo"> 2</button>
        <button @click="btntrewe">3</button>
        <img v-show="isShow" class="i1" src="../第01节：vue概述/1.jpg" alt />
        <img v-show="isThow" class="i2" src="../第01节：vue概述/2.jpg" alt />
        <img v-show="isWash" class="i3" src="../第01节：vue概述/3.jpg" alt />
    </div>
    <script>
        new Vue({
            data: {

                isShow: false,
                isThow: false,
                isWash: false
            },
            methods: {
                btnone() {
                    this.btn1 = this.i1;
                    this.isShow = !this.isShow
                    this.isThow = false
                    this.isWash = false
                },
                btntwo() {

                    this.btn2 = this.i2;
                    this.isThow = !this.isThow
                    this.isWash = false
                    this.isShow = false
                },
                btntrewe() {

                    this.btn3 = this.i3;
                    this.isWash = !this.isWash
                    this.isShow = false
                    this.isThow = false
                }

            }
        }).$mount("#app")
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        button {
            width: 150px;
            height: 150px;
        }
        
        img {
            width: 300px;
            height: 300px;
        }
        
        .i2 {
            display: block;
        }
        
        .i3 {
            display: block;
        }
    </style>
</body>

</html>